<template>
  <view class="main-box">
    <view class="u-page__item">
      <u-image
      style="margin-top: 200rpx;"
        v-if="viewList.length === 0" 
        width="100%"
        height="520rpx"
        src="../../../static/images/nodata.png"
      ></u-image>
      <view class="box" v-else>
        <view v-for="(viewItem, index) in viewList" :key="index">
          <view class="my-title-box">
            <view class="my-title-item-box">
              <view style="display: flex; align-items: center">
                <u-image
                  width="20rpx"
                  height="20rpx"
                  src="../../../static/images/yuan_aa.png"
                ></u-image>
                <text class="title" style="margin-left: 20rpx; color: #3E4247;">
                  {{ viewItem.clerkName }}
                </text>
              </view>
             
            </view>
            <view
              class="callape-btn"
              v-if="viewItem.flag == '0' && viewItem.status == '1'"
              @click="handleEdit(viewItem)"
			  style="width: 100rpx;font-size:26rpx"
              >修改</view
            >
            <view
              v-if="viewItem.status == '0'"
              class="callape-btn"
              style="background: #a9a9a9"
              @click="handleDisabledEdit()"
              >修改</view
            >
          </view>
          <view class="sub-title" style="border-bottom: 1rpx solid #d6dfec;">
             <view >{{ viewItem.positionName }}</view>
             <view >{{ viewItem.createTime}}</view> 
           </view>
        </view>
      </view>
    </view>
    <u-datetime-picker
      :show="timeShow"
      @cancel="timeCancel"
      @confirm="timeConfirm"
      v-model="value1"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>
<script>
// import uImage from '../../../uview-ui/components/u--image/u--image.vue'
import { getSelectTransferDailyFun } from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  // components: { uImage },
  data() {
    return {
      reFresh: '',
      valueTime: new Date(),
      timeShow: false,
      selectShow: false,
      columns: [],
      selectValue: '',
      value: '',
      value1: moment(new Date()).format('YYYY-MM-DD'),
      viewList: [], // 保存消息列表
    }
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
  }),
  onShow() {
    this.viewList = []
    getSelectTransferDailyFun({
      userId: this.userInfo.userId,
      flag: 0,
    }).then((res) => {
      this.viewList = res.data
    })
  },
  watch: {
    reFresh: function () {
      this.viewList = []
      getSelectTransferDailyFun({
        userId: this.userInfo.userId,
        flag: 0,
      }).then((res) => {
        this.viewList = res.data
      })
    },
  },
  methods: {
  
    timeCancel() {
      this.timeShow = false
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
      this.timeShow = false
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    change() {
      this.timeShow = true
    },
    handleOtherSelectClose() {
      this.selectShow = false
    },
    handleOtherSelectSubmit(e) {
      this.selectShow = false
      this.selectValue = e.value[0]
    },
    handleDisabledEdit() {
      uni.showToast({
        title: '已修改，无法重复操作',
        type: 'default',
        position: 'bottom',
        icon: 'none',
        position: 'center',
        mask: true,
        duration: 3000,
      })
    },
    handleSelect() {
      this.selectShow = true
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.selectValue = this.actionSheetList[index].text
    },
    sexSelect(e) {},
    // 点击是否显示全文
    handleEdit(item) {
      uni.navigateTo({
        url: `/pagesA/leader-daily/daily-edit-home/edit-form?id=${item.id}&valueTime=${item.createTime}&userName=${item.userName}&leaderid=${item.leaderid}`,
      })
    },

    // 获取消息列表
    getMessage() {
      var that = this
    },
  },
}
</script>
<style>

</style>
<style lang="scss" scoped>
.u-page__item {
  padding: 0 40rpx !important;
  box-sizing: border-box;
  margin: 0 16px;
  background: #fff;
  min-height: 520px;
  border: 0.5px solid #DCDFE7;
}
.u-page__item__title__slot-title {
  height: 80rpx;
  line-height: 80rpx;
}
.u-page__item_daily {
  background: #f8f8f8;
  border: 1rpx solid #d1d7df;
  box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
  border-radius: 1rpx;
  padding: 30rpx;
}
.view_img {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  .view_img_item {
    margin: 10rpx 4px 0rpx 4rpx;
  }
}
.message_icon {
  width: 20rpx;
  height: 20rpx;
  background: #2b4fa3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 22rpx;
}
.u-page {
  padding: 0;

  &__item {
    padding: 0 30rpx;
    &__title {
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;
      &__slot-title {
        font-size: 14px;
      }
    }
  }
}
.imgDetails {
  display: flex;
  flex-wrap: wrap;
}
.u-collapse-content {
  color: $u-tips-color;
  font-size: 14px;
}
.my-date {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  position: relative;
  margin: 17rpx 32rpx;
  height: 90rpx;
  background: #05163E;
  box-shadow: 0px 3rpx 2rpx 0px hsl(219, 100%, 89%);
  border-radius: 10rpx 10rpx 0px 0px;
  justify-content: space-between;
  .my-date-select {
    text-align: end;
    margin-right: 30rpx;
    width: 50%;
    // color: #c7dbff !important;
  }
}
.title {
  font-size: 30rpx;
  color: #606c81;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
 
  .my-title-box {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  .my-title-item-box {
    font-weight: bold;
    color: #606c81;
    align-items: center;

  }
  .textDetails {
    margin: 20rpx 0rpx 32rpx 0rpx;
    height: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    line-height: 30rpx;
  }
}
.topImg {
  width: 100%;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: 4rpx;
  width: 100%;
}
.sub-title {
      padding: 0 0 20rpx 25rpx;
      margin-left: 16rpx;
      display: flex;
      justify-content: space-between;
      color: #586279;
    }
</style>
